<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="axios.min.js"></script>
    <script src="request.js"></script>
</head>
<body>
<h1>Login</h1>
<label for="username">用户名：</label>
<input id="username" type="text" name="username"/>
<br/>
<label for="password">密码：</label>
<input id="password" type="text" name="password" style="margin-left: 16px"/>
<br/>
<label for="code">验证码：</label>
<input id="code" type="text" name="code"/>
<br/>
<img id="capchaImage" onclick="queryCapcha()">
<br/>
<label for="rememberMe">记住我：</label>
<input id="rememberMe" type="checkbox" name="rememberMe" value="true"/>
<br/>
<button type="submit" onclick="login()">登录</button>
<div>UUID => <span id="uuid"></span></div>
</body>
<script>
    queryCapcha()

    function queryCapcha() {
        const request = getAxios(axios, '')
        let capchaImage = document.querySelector("#capchaImage")

        request({
            url: 'captchaImage',
            method: 'get'
        }).then(res => {
            capchaImage.setAttribute("src", "data:image/gif;base64," + res.data.img)
            document.querySelector("#uuid").innerText = res.data.uuid
        })
    }

    function login() {
        const username = document.querySelector("#username").value
        const password = document.querySelector("#password").value
        const code = document.querySelector("#code").value
        const uuid = document.querySelector("#uuid").innerText

        let request = getAxios(axios, '')

        request({
            url: 'login',
            method: 'post',
            data: {
                username, password, code, uuid
            }
        }).then(res => {
            if (res.status === 200){
                location.href = "index.html?token="+res.data
            }
        })

    }
</script>
</html>